import React, { Component } from "react";
import { NoticeBar, Modal, Toast } from "antd-mobile";
import { connect } from "react-redux";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import MainLayout from "@component/mainLayout/mainLayout";
import { getAppPlatformsDatas } from "@redux/Action/nativeDatas/nativeDatas";
import InCredit from "./components/inCredit";
import xhf_foot from "@images/imageXHF/xhf_foot.png";
import { checkBonus } from "@redux/Action/bank/bank";
import HomeSkeleton from "@/component/skeleton/home";
import { refresh } from "@/component/scroll/index2";
import titleLogo from "@images/imageXHF/xfh_title.png";
import ActivityModal from "@component/activityModal";

import "./style.scss";

class XhfHomeCreditingPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			boardTitle: "", //小辉付公告标题
			boardContent: "", //小辉付公告内容
			modal1: false, //公告详情弹窗
			flag: true,
			btnText: "审核中",
			xhfAmountInfo: {
				availableAmount: "", //可用额度
				creditAmount: "", //授信额度
				maxAmount: "" //最高额度
			},
			loaded: false,
			activeVisible: false, //活动弹窗
			activeData: {}, //活动数据
			buttonArray: [],
			isInitInfo: false //crediting_initInfo接口是否返回信息
		};
		this.timer = null;
	}
	componentDidMount() {
		this.getLong();
	}
	//获取经纬度
	getLong() {
		let timer = null;
		let longitude, latitude;
		window.YHAuthorize.callHandler("Privacy_Loaction", "", res => {
			if (res.status == "1000") {
				longitude = res.data.longitude;
				latitude = res.data.latitude;
			}
		});
		timer = setTimeout(() => {
			this.initData(longitude, latitude);
			//this.initData("106.54", "29.59");
			this.queryPopupFrameRule();
			clearTimeout(timer);
		}, 100);
	}
	componentWillUnmount() {
		clearInterval(this.timer);
		this.timer = null;
	}
	//获取活动弹窗
	queryPopupFrameRule = () => {
		let objs = {
			url: InterfaceG.queryPopupFrameRule,
			params: {
				pageCode: "xhfHomePage",
				productCode: "601"
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				if (res.data) {
					this.setState({
						activeData: res.data,
						activeVisible: true,
						buttonArray: res.data.buttonArray
							? JSON.parse(res.data.buttonArray)
							: []
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	/**数据初始化*/
	initData = (longitude, latitude) => {
		if (this.props.location.query) {
			this.setState({
				flag: false
			});
		} else {
			this.setState({
				flag: true
			});
		}
		this.getXHFHome(longitude, latitude);
		this.getNotice();
	};
	/**获取公告*/
	getNotice() {
		const params = {
			url: `/fm/boardInfo`,
			header: this.props.getAppPlatformsDatas,
			params: {
				boardType: "00",
				boardSubtype: "sdkXhf"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code == "0") {
				const { data = [] } = res;
				const { boardContent = "" } = data[0] || {};
				const { boardTitle = "" } = data[0] || {};
				this.setState({
					boardContent,
					boardTitle
				});
			}
		});
	}
	/**小辉付跳转不同首页*/
	jumpPage(url, Urlparams) {
		this.props.history.push({
			pathname: `/${url}`,
			state: Urlparams
		});
	}
	/**小辉付首页初始化*/
	getXHFHome(longitude, latitude) {
		let objs = {
			url: InterfaceG.crediting_initInfo,
			params: {
				lnid: "602",
				version: "2.0",
				longitude,
				latitude
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				clearInterval(this.timer);
				const { xhfAmountInfo } = res.data;
				this.setState(
					{
						loaded: Math.random(),
						xhfAmountInfo: xhfAmountInfo,
						isInitInfo: true
					},
					() => refresh()
				);
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	/**
	 * 关闭弹窗
	 */
	onClose = key => () => {
		this.setState({
			[key]: false
		});
	};
	onload = () => {
		this.setState({ loaded: Math.random() });
	};
	//关闭活动弹窗
	onCloseAcitve = () => {
		this.setState({
			activeVisible: false
		});
	};
	render() {
		const {
			boardTitle,
			boardContent,
			xhfAmountInfo,
			btnText,
			activeVisible,
			activeData,
			buttonArray,
			isInitInfo
		} = this.state;
		let _pageParams = {
			header: {
				title: "小辉付",
				titleType: titleLogo,
				sensorsData: {
					title: "开通首页"
				},
				goBackAction: () => {
					if (this.state.flag) {
						yhTools.closePage({ flag: "xhfIndex" });
					} else {
						this.props.history.goBack();
					}
				}
			},
			componentDidRecover: () => {
				this.initData();
			},
			cacheLifecycles: this.props.cacheLifecycles,
			history: this.props.history
		};
		return (
			<MainLayout pageParams={_pageParams} isScroll={true}>
				<HomeSkeleton load={isInitInfo === false}>
					<div className="page-xhfHomeCrediting">
						<div className="xhf-new-index-page-noticeBar">
							{boardContent && (
								<NoticeBar
									marqueeProps={{
										loop: true,
										style: { padding: "0 7.5px" }
									}}
									onClick={() => this.setState({ modal1: true })}
								>
									{yhTools.htmlDecodeToText(boardContent)}
								</NoticeBar>
							)}
						</div>
						{/* 授信中 */}
						{isInitInfo && (
							<InCredit
								{...this.props}
								ref="child"
								onRef={this.onRef}
								boardContent={boardContent}
								xhfAmountInfo={xhfAmountInfo}
								btnText={btnText}
								stadus={"3"}
							/>
						)}
						<div className="xhf-index-footer">
							<img src={xhf_foot} alt="" />
						</div>
					</div>
				</HomeSkeleton>
				<Modal
					visible={this.state.modal1}
					transparent
					maskClosable={false}
					onClose={this.onClose("modal1")}
					title={boardTitle}
					footer={[
						{
							text: "确定",
							onPress: () => {
								console.log("ok");
								this.onClose("modal1")();
							}
						}
					]}
				>
					{
						<div
							className="board-content-box"
							style={{ textAlign: "left" }}
							dangerouslySetInnerHTML={{
								__html: this.state.boardContent
							}}
						></div>
					}
				</Modal>
				<ActivityModal
					activeVisible={activeVisible}
					onCloseAcitve={this.onCloseAcitve}
					activeData={activeData}
					buttonArray={buttonArray}
					history={this.props.history}
				/>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return {
		...state,
		bonusStr: state.bankReducer.bonusStr
	};
}

function mapDispatchToProps(dispatch) {
	return {
		_getAppPlatformsDatas: abj => {
			//获取native的数据
			dispatch(getAppPlatformsDatas(abj));
		},
		checkBonus: (val1, val2) => {
			dispatch(checkBonus(val1, val2));
		}
	};
}

const XhfHomeCrediting = connect(
	mapStateToProps,
	mapDispatchToProps
)(XhfHomeCreditingPage);
export default XhfHomeCrediting;
